<script>
//表格标题配置
import BaseConfig from '../BaseConfig';
import * as ConfigEnum from '../config/config-enum';

export default {
  name: 'TableTitleConfig',
  mixins: [BaseConfig],
  data() {
    return {
      fontSize: 12, //字体大小
      textAlignTypes: ConfigEnum.TEXT_ALIGN_TYPE,
      textWeightTypes: ConfigEnum.TEXT_FONT_WEIGHT_TYPE,
    };
  },
  created() {
    this.fontSize = parseInt(this.chartOptions.settings.headerStyle.fontSize);
  },
  methods: {
    updateFontSize() {
      this.chartOptions.settings.headerStyle.fontSize = `${this.fontSize}px`;
      this.updateOptions();
    },
  },
};
</script>

<template>
  <div>
    <Row>
      <Col span="8">
      <span>显示标题：</span>
      </Col>
      <Col span="16">
      <Switch
        v-model="chartOptions.settings.headerStyle.show"
        @on-change="updateOptions">
        <span slot="open">是</span>
        <span slot="close">否</span>
      </Switch>
      </Col>
    </Row>
    <div
      v-if="chartOptions.settings.headerStyle.show"
      class="switch-box">
      <Row>
        <Col span="8">
        <span>标题内容：</span>
        </Col>
        <Col span="16">
        <Input
          v-model="chartOptions.settings.headerStyle.text"
          @on-change="updateOptions"></Input>
        </Col>
      </Row>
      <Row>
        <Col span="8">
        <span>标题高度：</span>
      </Col>
        <Col span="16">
        <InputNumber
          v-model="chartOptions.settings.headerStyle.height"
          :min="5"
          @on-change="updateOptions"></InputNumber>
        </Col>
      </Col>
      </Row>
      <Row>
        <Col span="8">
        <span>标题背景：</span>
      </Col>
        <Col span="16">
        <ColorPicker
          v-model="chartOptions.settings.headerStyle.backgroundColor"
          @on-change="updateOptions"></ColorPicker>
      </Col>
      </Row>
      <Row>
        <Col span="8">
        <span>字体大小：</span>
      </Col>
        <Col span="16">
        <InputNumber
          v-model="fontSize"
          :min="8"
          @on-change="updateFontSize"></InputNumber>
      </Col>
      </Row>
      <Row>
        <Col span="8">
        <span>字体粗细：</span>
        </Col>
        <Col span="16">
        <Select
          v-model="chartOptions.settings.headerStyle.fontWeight"
          @on-change="updateOptions">
          <Option
            v-for="item in textWeightTypes"
            :value="item.value"
            :key="item.value">{{ item.key }}</Option>
        </Select>
        </Col>
      </Row>
      <Row>
        <Col span="8">
        <span>字体颜色：</span>
      </Col>
        <Col span="16">
        <ColorPicker
          v-model="chartOptions.settings.headerStyle.color"
          @on-change="updateOptions"></ColorPicker>
      </Col>
      </Row>
      <Row>
        <Col span="8">
        <span>文本对齐：</span>
        </Col>
        <Col span="16">
        <Select
          v-model="chartOptions.settings.headerStyle.textAlign"
          @on-change="updateOptions">
          <Option
            v-for="item in textAlignTypes"
            :value="item.value"
            :key="item.value">{{ item.key }}</Option>
        </Select>
        </Col>
      </Row>
    </div>
  </div>
</template>

<style>
</style>
